<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="file/jquery-3.3.1.min.js"></script>
</head>
<body>
<button type="button">click</button>
<div></div>
</body>
<script>
    $(function () {
        $("button").click(function () {
            //1。服务器返回纯文本或html
            // $.get("file/get.php", function (data) {
            //     $("div").html(data);
            // });

            //2。服务器返回XML格式数据
            //     $.get( "get.php" , function(data){
            //         //1.将xml数据转为jQuery对象,并获取内部的数据
            //         var name = $(data).children("name") .text();
            //         var lesson =$(data).children("lesson").text();
            //         var work = $(data).children("work").text();
            //         //2.将解析出来的数据拼接成需要显示的html代码
            //         var html = "<>" +name+"</p>"+"<p>"+lesson+"</p>"+"<p>"+work+"</p>";
            //         //3。将html代码插入到指定节点中
            //         $ ("div").html(html);
            // });

            //2。服务器返回json格式数据
            $.getJSON('file/get.php',function (data) {
                //不需要转换了 使用了getJSON
                // let obj = JSON.parse(data);
                $('div').empty()
                    .append(data.id)
                    .append(data.name)
                    .append(data.price)
                    .append(data.area)
            })
        })
    })
</script>
</html>